<template>
  <el-dialog
    title="添加"
    :visible.sync="UpdatedialogVisible"
    width="600px"
    :before-close="modalClose">
    <el-form :model="adminUser" ref="adminUser" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item
        label="用户账号"
        prop="adminAccount"
        required="true"
      >
        <el-input type="text" v-model="adminUser.adminAccount" auto-complete="off" clearable></el-input>
      </el-form-item>
      <el-form-item
        label="用户密码"
        prop="adminPassword" required="true">
        <el-input type="password" v-model="adminUser.adminPassword" auto-complete="off" clearable></el-input>
      </el-form-item>
      <el-form-item
        label="用户手机号"
        prop="adminPhoneNumber" required="true">
        <el-input type="adminPhoneNumber" v-model="adminUser.adminPhoneNumber" auto-complete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户权限">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="用户头像"
        prop="adminHeadProtrait">
        <el-upload
          class="upload-demo"
          action="http://localhost:8001/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          v-model="adminUser.adminHeadProtrait">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="rest">重置</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="modalClose()">取 消</el-button>
        <el-button type="primary" @click="demo">确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
import axios from "axios"
import cookie from "js-cookie"
export default {
  data() {
    return {
      UpdatedialogVisible:true,
      user:{},
      adminUser:{},
      options:[],
      value:"",
      rules:{
        adminAccount:[
          { pattern: /^[0-9A-Za-z]{6,12}$/, message: '账号6位到12位' }
        ],
        adminPassword:[
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/, message: '密码6到12位,数字加字母' }
        ],
        adminRepassword:[
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/, message: '密码6到12位,数字加字母' }
        ],
        adminPhoneNumber:[
          { pattern: /^[0-9]{11}$/, message: '手机号不正确' }
        ]
      },
    }
  },
  props: ["updateClose","init","admin","adminCookie"],
  mounted () {
    var th=this;
    this.adminUser=this.admin;
    console.log(this.adminUser)
    axios.get("http://localhost:8001/role").then((data)=>{
      th.options=data.data.records;
      console.log(th.options)
    })
    if(cookie.get("user")!=null){
      this.user=JSON.parse(cookie.get("user"));
    }
    console.log(this.UpdatedialogVisible)
  },
  methods: {
    handleSuccess(response,file,fileList){
      this.adminUser.adminHeadProtrait=response;
      console.log(response);

    },
    submitForm(){

      this.adminUser.adminRoleId=this.value;
      this.adminUser.creatorId=1;
      this.adminUser.updateBy=1;
      this.adminUser.adminStatus=1;
      var th=this;
      axios.put("http://localhost:8001/admin",{
        adminId: this.adminUser.adminId,
        adminAccount: this.adminUser.adminAccount,
        adminHeadProtrait: this.adminUser.adminHeadProtrait,
        adminPassword: this.adminUser.adminPassword,
        adminPhoneNumber: this.adminUser.adminPhoneNumber,
        adminRoleId:this.adminUser.adminRoleId,
        updateBy:this.adminCookie.adminId
      }).then((data)=>{
        console.log(data)
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        });
        console.log(222);
        this.adminUser=null;
        this.init();
        this.updateClose();
      })

    },
    rest(){
      this.$refs.adminUser.resetFields()
    },
    demo(){
      // this.AdddialogVisible=false;
      console.log(this.UpdatedialogVisible)
      this.updateClose();
    },
    modalClose() {
      this.updateClose();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>
